<template>
    <div class="child constEchnogyModule">
        <p class="topstyle">
            <span class="total">共上传{{list.total}}篇文章</span>
            <span class="slectsd sebefore" v-show="stylechoice" :class="{'slectsdon':showstyle?'slectsdon': ''}" @click="showtyle = !showtyle">{{styletext}}</span>
        </p>
        <div class="all_type_body" :class="{'openHei' : showstyle}" v-show="showstyle">
            <ul class="type_body">
                <li class="type_item" v-for="(item, index) in listyle" :class="{'active': isactive == index}" :key="item.id" @click="choose(index,item.cat_name,item.cat_id)">{{item.cat_name}}</li>
            </ul>
        </div>
        <ul class="caselist">
            <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">-->
                <li @click="skiptoarticle(item.article_relevance_id,item.article_id)" v-for="(item,index) in list.data" :key="index">
                    <div class="miaoshu">
                        <div class="new_articletop">
                            <image alt :lazy-load="true" :src="item.cover_img"></image>
                            <div class="article_sign">{{item.cat_name}}</div>
                        </div>
                        <div class="new_articledesc">
                            <p class="article_tle ellipsis_two_line_com">{{item.title}}</p>
                            <div class="view_people">
                                <div class="view_img">
                                    <img :src="items.share_user_picture" alt v-for="(items,index) in item.share_user_list" :key="index" />
                                    <span>{{item.view_num}}浏览</span>
                                </div>
                                <div class="view_transfer">
                                    <i class="iconfont iconfenxiang"></i>
                                    {{item.share_num}}
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
        </ul>
    </div>
</template>

<script>

import { getProcessList, getTechogyList } from '@/api/article'
import { list } from '@/mixins'

export default {
	name: 'Constechnogy',
	mixins: [list],
	data() {
		return {
			isactive: 0,
			owner_user_id: '',
			listyle: '',
			tech_style: '',
			showstyle: false, // 下拉风格的展示状态
			styletext: '全部工艺',
			stylechoice: true, // 下拉风格点击按钮的状态
			mispage: '' // 缺省页显示状态
		}
	},
	onLoad(option) {
		this.owner_user_id = this.option.owner_user_id
		this.gettechogy()
		// this.gettechogylist()
	},
	methods: {
		gettechogy() {
			// 风格类型获取
			getProcessList().then(res => {
				this.listyle = res.data
				this.listyle.unshift({ cat_name: '全部工艺', cat_id: '' })
			})
		},
		choose(index, cat_name, cat_id) {
			// 风格选择
			this.isactive = index
			this.showstyle = !this.showstyle
			this.styletext = cat_name
			this.tech_style = cat_id
			this.resetList()
			this.getloadtechogy()
		},
		onRefresh() {
			// 下拉刷新
			this.resetList()
			this.getloadtechogy()
		},
		// getloadtechogy: _.debounce(
		// 	function() {
		// 		// 工艺上拉加载
		// 		var that = this
		// 		var userid = that.owner_user_id
		// 		let data = {
		// 			owner_user_id: userid,
		// 			cat_id: that.tech_style,
		// 			limit: that.list.limit,
		// 			page: that.list.page
		// 		}
		// 		return getTechogyList(data).then(res => {
		// 			this.completes(res)
		// 		})
		// 	},
		// 	200,
		// 	{
		// 		leading: true,
		// 		trailing: false
		// 	}
		// ),
		getloadtechogy() {
			// 工艺上拉加载
			var that = this
			var userid = that.owner_user_id
			let data = {
				owner_user_id: userid,
				cat_id: that.tech_style,
				limit: that.list.limit,
				page: that.list.page
			}
			return getTechogyList(data).then(res => {
				this.completes(res)
			})
		},
		skiptoarticle(article_relevance_id, article_id) {
			var gobacktype = 'normal'
			var userid = this.owner_user_id
			this.$router.push({
				name: 'Technogydetail',
				query: {
					owner_user_id: userid,
					active: 1,
					gobackt: gobacktype,
					articleid: article_relevance_id,
					mainId: article_id
				}
			})
		}
	}
}
</script>
<style scoped lang="scss">
.caselist li {
    position: relative;
    height: 480px;
    border-radius: 20px 20px 0 0;
}
.caselist li .miaoshu {
    margin-top: 0;
}
.constEchnogyModule {
    position: relative;
    .all_type_body {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 440px;
        overflow-y: auto;
        box-shadow: 0 10px 10px #ddd;
        background-color: #fff;
        z-index: 1;
        .type_body {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 30px 15px;
            .type_item {
                width: calc(33.33% - 36px);
                height: 70px;
                line-height: 68px;
                text-align: center;
                border-radius: 50px;
                border: 1px solid #ddd; /*no*/
                margin: 0 15px 30px;
                display: -webkit-box;
                word-break: break-all;
                /*! autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .type_item.active {
                background-color: #ffd11a;
                border: none;
            }
        }
    }

    .openHei {
        animation: maxHeight 0.3s;
        -webkit-animation: maxHeight 0.3s; /* Safari 与 Chrome */
        animation-fill-mode: forwards;
    }

    @keyframes maxHeight {
        from {
            min-height: 0;
        }
        to {
            min-height: 100px;
        }
    }

    @-webkit-keyframes maxHeight {
        from {
            min-height: 0;
        }
        to {
            min-height: 100px;
        }
    }
}
</style>
